<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>看板视图 - Web</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body class="bg-gray-50">
    <div class="p-6">
        <div class="flex justify-between items-center mb-6">
            <h2 class="text-2xl font-bold text-gray-800">看板视图</h2>
            <div class="flex gap-2">
                <button class="px-4 py-2 bg-white border rounded-lg text-sm">
                    <i class="fas fa-filter mr-2"></i>筛选
                </button>
                <button class="px-4 py-2 bg-blue-500 text-white rounded-lg text-sm">
                    <i class="fas fa-plus mr-2"></i>新建
                </button>
            </div>
        </div>

        <div class="flex gap-4 overflow-x-auto pb-4">
            <!-- Column: 待处理 -->
            <div class="flex-shrink-0 w-80 bg-gray-100 rounded-lg p-4">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="font-bold text-gray-800">待处理 <span class="text-sm text-gray-500">(8)</span></h3>
                    <button class="text-gray-500"><i class="fas fa-plus"></i></button>
                </div>
                
                <div class="space-y-3">
                    <div class="bg-white rounded-lg p-4 shadow-sm border-l-4 border-red-500 cursor-move hover:shadow-md transition">
                        <div class="flex justify-between items-start mb-2">
                            <h4 class="font-semibold text-gray-800 flex-1">修复支付接口超时</h4>
                            <span class="bg-red-100 text-red-600 text-xs px-2 py-1 rounded">P0</span>
                        </div>
                        <p class="text-sm text-gray-600 mb-3">支付成功但返回超时</p>
                        <div class="flex items-center justify-between text-xs">
                            <span class="text-gray-500"><i class="far fa-clock mr-1"></i>今天</span>
                            <span class="bg-blue-100 text-blue-600 px-2 py-1 rounded">工作</span>
                        </div>
                    </div>

                    <div class="bg-white rounded-lg p-4 shadow-sm border-l-4 border-orange-500 cursor-move hover:shadow-md transition">
                        <div class="flex justify-between items-start mb-2">
                            <h4 class="font-semibold text-gray-800 flex-1">优化首页加载</h4>
                            <span class="bg-orange-100 text-orange-600 text-xs px-2 py-1 rounded">P1</span>
                        </div>
                        <p class="text-sm text-gray-600 mb-3">图片懒加载优化</p>
                        <div class="flex items-center justify-between text-xs">
                            <span class="text-gray-500"><i class="far fa-clock mr-1"></i>明天</span>
                            <span class="bg-green-100 text-green-600 px-2 py-1 rounded">前端</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Column: 处理中 -->
            <div class="flex-shrink-0 w-80 bg-blue-50 rounded-lg p-4">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="font-bold text-gray-800">处理中 <span class="text-sm text-gray-500">(12)</span></h3>
                    <button class="text-gray-500"><i class="fas fa-plus"></i></button>
                </div>
                
                <div class="space-y-3">
                    <div class="bg-white rounded-lg p-4 shadow-sm border-l-4 border-blue-500 cursor-move hover:shadow-md transition">
                        <div class="flex justify-between items-start mb-2">
                            <h4 class="font-semibold text-gray-800 flex-1">编写单元测试</h4>
                            <span class="bg-blue-100 text-blue-600 text-xs px-2 py-1 rounded">P2</span>
                        </div>
                        <p class="text-sm text-gray-600 mb-2">覆盖核心业务逻辑</p>
                        <div class="mb-3">
                            <div class="flex justify-between text-xs text-gray-600 mb-1">
                                <span>进度</span>
                                <span>60%</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-2">
                                <div class="bg-blue-500 h-2 rounded-full" style="width: 60%"></div>
                            </div>
                        </div>
                        <div class="flex items-center justify-between text-xs">
                            <span class="text-gray-500"><i class="far fa-clock mr-1"></i>3天后</span>
                            <span class="bg-blue-100 text-blue-600 px-2 py-1 rounded">工作</span>
                        </div>
                    </div>

                    <div class="bg-white rounded-lg p-4 shadow-sm border-l-4 border-green-500 cursor-move hover:shadow-md transition">
                        <div class="flex justify-between items-start mb-2">
                            <h4 class="font-semibold text-gray-800 flex-1">学习 React Hooks</h4>
                            <span class="bg-green-100 text-green-600 text-xs px-2 py-1 rounded">P2</span>
                        </div>
                        <p class="text-sm text-gray-600 mb-3">高级用法和最佳实践</p>
                        <div class="flex items-center justify-between text-xs">
                            <span class="text-gray-500"><i class="far fa-clock mr-1"></i>本周</span>
                            <span class="bg-green-100 text-green-600 px-2 py-1 rounded">学习</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Column: 待验证 -->
            <div class="flex-shrink-0 w-80 bg-yellow-50 rounded-lg p-4">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="font-bold text-gray-800">待验证 <span class="text-sm text-gray-500">(3)</span></h3>
                    <button class="text-gray-500"><i class="fas fa-plus"></i></button>
                </div>
                
                <div class="space-y-3">
                    <div class="bg-white rounded-lg p-4 shadow-sm border-l-4 border-yellow-500 cursor-move hover:shadow-md transition">
                        <div class="flex justify-between items-start mb-2">
                            <h4 class="font-semibold text-gray-800 flex-1">API文档更新</h4>
                            <span class="bg-yellow-100 text-yellow-600 text-xs px-2 py-1 rounded">P2</span>
                        </div>
                        <p class="text-sm text-gray-600 mb-3">新增接口文档说明</p>
                        <div class="flex items-center justify-between text-xs">
                            <span class="text-gray-500"><i class="far fa-user mr-1"></i>待审核</span>
                            <span class="bg-purple-100 text-purple-600 px-2 py-1 rounded">文档</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Column: 已解决 -->
            <div class="flex-shrink-0 w-80 bg-green-50 rounded-lg p-4">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="font-bold text-gray-800">已解决 <span class="text-sm text-gray-500">(15)</span></h3>
                    <button class="text-gray-500"><i class="fas fa-ellipsis-h"></i></button>
                </div>
                
                <div class="space-y-3">
                    <div class="bg-white rounded-lg p-4 shadow-sm border-l-4 border-green-500 cursor-move hover:shadow-md transition">
                        <div class="flex justify-between items-start mb-2">
                            <h4 class="font-semibold text-gray-800 flex-1">修复登录bug</h4>
                            <i class="fas fa-check-circle text-green-500"></i>
                        </div>
                        <p class="text-sm text-gray-600 mb-3">验证码显示问题已修复</p>
                        <div class="flex items-center justify-between text-xs">
                            <span class="text-gray-500"><i class="far fa-calendar mr-1"></i>昨天</span>
                            <span class="bg-blue-100 text-blue-600 px-2 py-1 rounded">工作</span>
                        </div>
                    </div>

                    <div class="bg-white rounded-lg p-4 shadow-sm border-l-4 border-green-500 cursor-move hover:shadow-md transition">
                        <div class="flex justify-between items-start mb-2">
                            <h4 class="font-semibold text-gray-800 flex-1">数据库优化</h4>
                            <i class="fas fa-check-circle text-green-500"></i>
                        </div>
                        <p class="text-sm text-gray-600 mb-3">添加索引提升查询速度</p>
                        <div class="flex items-center justify-between text-xs">
                            <span class="text-gray-500"><i class="far fa-calendar mr-1"></i>2天前</span>
                            <span class="bg-purple-100 text-purple-600 px-2 py-1 rounded">后端</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
